<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios基本使用</title>
  </head>
  <body>
    <button id="btn1">点击发送 GET 请求</button>
    <button id="btn2">点击发送 GET 请求(async 和 await)</button>
    <button id="btn3">点击发送 POST 请求</button>
    <button id="btn4">点击发送 PUT 请求</button>
    <button id="btn5">点击发送 DELETE 请求</button>

    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <script>
      
      document.querySelector('#btn1').onclick = function(){
        axios({
          url:'http://localhost:3000/movie',
          method:'GET'
        }).then(response=>{
          console.log(response);
          console.log(response.data);
          alert(JSON.stringify(response.data))
        },error=>{
          console.log(error);
        })
      }
      document.querySelector('#btn2').onclick = async ()=>{
        try{
          let response = await axios('http://localhost:3000/movie2')
          console.log(response);
        }catch(error){
          console.log(error);
        }
      }
      document.querySelector('#btn3').onclick = async ()=>{
        try{
          let response = await axios({
            url:'http://localhost:3000/movie',
            method:'post',
            data:{
              name: "泰囧",
              director: "徐峥"
            }
          })
          console.log(response);
          alert(JSON.stringify(response.data))
        }catch(error){
          console.log(error);
        }
      }
      document.querySelector('#btn4').onclick = async ()=>{
        try{
          let response = await axios({
            url:'http://localhost:3000/movie/6',
            method:'PUT',
            data:{
              name: "人在囧途",
              director: "徐峥"
            }
          })
          console.log(response);
          alert(JSON.stringify(response.data))
        }catch(error){
          console.log(error);
        }
      }
      document.querySelector('#btn5').onclick = async ()=>{
        try{
          let response = await axios({
            url:'http://localhost:3000/movie/5',
            method:'delete',
          })
          console.log(response);
          alert(JSON.stringify(response.data))
        }catch(error){
          console.log(error);
        }
      }
      
      
    </script>
  </body>
</html>
